<template>
  <!-- 境外人员统计图 -->
  <div>
    <page :asideShow="asideShow" :footShow="false">
      <!-- <div slot="aside">
        测试代码
      </div>-->
      <div slot="toolbar">
        <el-form
          :inline="true"
          :model="filters"
          label-width="90px"
          label-position="right"
        >
          <el-form-item label="选择小区">
            <el-select
              v-model="filters.CID"
              filterable
              placeholder="请选择"
              @keydown.enter.native="handleQuery"
              @change="handleQuery"
              clearable
            >
              <el-option
                v-for="item in villageList"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>
            <!-- <el-select v-model="filters.CID" filterable  placeholder="请选择" clearable>
              <el-option
                v-for="item in getCommunity"
                :key="item.CID"
                :label="item.name"
                :value="item.CID"
              ></el-option>
            </el-select>-->
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleQuery">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div slot="content" class="contenter">
        <div class="staticNum">
          <div class="todayAccount">
            <div>通行统计</div>
            <ul class="todayStatic">
              <li>
                <div>人员总数</div>
                <div class="num">{{ pageResult.personCount }}人</div>
              </li>
              <li>
                <div>本周注册人数</div>
                <div class="num">{{ pageResult.weekPersonCount }}人</div>
              </li>
              <li>
                <div>昨天注册人数</div>
                <div class="num">{{ pageResult.yesterdayPersonCount }}人</div>
              </li>
              <li>
                <div>未审核人数</div>
                <div class="num" style="color: red">
                  {{ pageResult.auditPersonCount }}人
                </div>
              </li>
            </ul>
            <div class="todayEchart">
              <p class="daynum">
                查询天数：
                <input
                  v-model="dayto"
                  onkeyup="this.value=this.value.replace(/[^\d]/g,'')"
                  placeholder="最多不超过31天"
                  type="text"
                />
                <el-button type="primary" @click="handleDay">查询</el-button>
              </p>
              <div
                id="myPie"
                :style="{ width: '100%', height: '90%' }"
                v-loading="loading"
                element-loading-text="加载中..."
                element-loading-spinner="el-icon-loading"
              ></div>
            </div>
          </div>
        </div>
      </div>
    </page>
  </div>
</template>

<script>
export default {
  data() {
    return {
      aside: false,
      asideShow: false,
      unitShow: false,
      pageResult: {},
      selections: [],
      filters: {
        CID: "",
        GID: "",
        startTime: "",
        endTime: "",
        status: "",
        leaf: "",
      },
      pageRequest: {
        page: 1,
        limit: 10,
      },
      loading: false,
      totalSize: 0,
      props: {
        value: "GID",
        label: "name",
        children: "children",
        checkStrictly: true,
      },
      options: [],

      getCommunity: [],
      //   查看天数
      dayto: "",
      //   通行趋势
      currentTotal: {
        countArray: ["0", "0", "0", "0", "0", "0", "0"],
        timeArray: [
          "星期一",
          "星期二",
          "星期三",
          "星期四",
          "星期五",
          "星期六",
          "星期日",
        ],
      },
      // 小区列表
      villageList: [],
    };
  },
  methods: {
    // 获取分页数据
    handleQuery: function () {
      //   let params = {};

      let params = {
        // where: this.filters,
        // page: this.pageRequest.page,
        // limit: this.pageRequest.limit
        CID: this.filters.CID,
      };
      let param = JSON.stringify(params);
      this.$api.three.countCurrent(param).then((res) => {
        if (res.code == 0) {
          this.pageResult = res.data;
          this.communitySum = res.data.communitySum;
        } else {
          this.$message({
            message: "操作失败, " + res.msg,
            type: "error",
          });
        }
      });
    },

    //获取小区的列表选择器
    getCommunityList() {
      this.villageList = this.$store.state.village.villageList;
    },
    // 获取曲线图
    handleDay() {
      this.loading = true;
      //  趋势图
      if (this.dayto > 31) {
        this.dayto = 31;
      } else if (this.dayto < 0) {
        this.dayto = 1;
      }
      let days = {
        day: this.dayto ? this.dayto : "7",
        CID: this.filters.CID,
      };
      let dayy = JSON.stringify(days);
      this.$api.three.countPass(dayy).then((res) => {
        if (res.code == 0) {
          this.loading = false;
          this.currentTotal = res.data;
          this.currentTotal.timeArray = this.currentTotal.timeArray.reverse();
          this.currentTotal.countArray = this.currentTotal.countArray.reverse();
          this.echarts(this.currentTotal);
        } else {
          this.echarts(this.currentTotal);
        }
      });
      this.resizefun = () => {
        this.$echarts.init(document.getElementById("myPie")).resize();
      };
      window.addEventListener("resize", this.resizefun);
    },
    refreshPageRequest(page) {
      this.pageRequest.page = page;
      this.handleQuery();
    },
    handleSelectionChange(val) {
      this.selections = val;
    },
    echarts(dataTotal) {
      let myChart = this.$echarts.init(document.getElementById("myPie"));
      myChart.setOption({
        // backgroundColor: "#080b30",
        title: {
          text: "通行趋势",
          textStyle: {
            align: "center",
            // color: "rgb(0,202,149)",
            fontSize: 20,
          },
          top: "5%",
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            lineStyle: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                  },
                  {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                  },
                ],
                global: false,
              },
            },
          },
        },
        grid: {
          top: "15%",
          left: "5%",
          right: "5%",
          bottom: "5%",
          // containLabel: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              show: true,
            },
            splitArea: {
              // show: true,
              color: "#f00",
              lineStyle: {
                color: "#f00",
              },
            },
            axisLabel: {
              //   color: "rgb(0,202,149)",
              fontSize: "12",
            },
            splitLine: {
              show: false,
            },
            boundaryGap: false,
            data: dataTotal.timeArray,
          },
        ],

        yAxis: [
          {
            type: "value",
            min: 0,
            // max: 140,
            splitNumber: 4,
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisLine: {
              show: false,
            },
            axisLabel: {
              show: false,
              margin: 20,
              textStyle: {
                color: "#d1e6eb",
              },
            },
            axisTick: {
              show: false,
            },
          },
        ],
        series: [
          {
            name: "注册总量",
            type: "line",
            // smooth: true, //是否平滑
            showAllSymbol: true,
            // symbol: 'image://./static/images/guang-circle.png',
            symbol: "circle",
            symbolSize: 20,
            lineStyle: {
              normal: {
                color: "#00ca95",
                shadowColor: "rgba(0, 0, 0, .3)",
                shadowBlur: 0,
                shadowOffsetY: 5,
                shadowOffsetX: 5,
              },
            },
            label: {
              show: true,
              position: "top",
              textStyle: {
                color: "#00ca95",
              },
              formatter: "{c}人",
            },

            itemStyle: {
              color: "#00ca95",
              borderColor: "#fff",
              borderWidth: 3,
              shadowColor: "rgba(0, 0, 0, .3)",
              shadowBlur: 0,
              shadowOffsetY: 2,
              shadowOffsetX: 2,
            },
            tooltip: {
              show: false,
            },
            areaStyle: {
              normal: {
                shadowColor: "rgba(0,202,149, 0.9)",
                shadowBlur: 30,
              },
            },
            data: dataTotal.countArray,
          },
        ],
      });
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  },
  mounted() {
    this.handleQuery();
    this.getCommunityList();
    this.handleDay();
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.resizefun);
    this.resizefun = null;
  },
};
</script>

<style lang="scss" scoped>
.contenter {
  height: 100%;
  box-sizing: border-box;
}
.staticNum {
  display: flex;
  justify-content: space-around;
  //   background: darkgoldenrod;
  padding: 20px;
  box-sizing: border-box;
  height: 100%;
}

.todayStatic {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  border-bottom: #ededed solid 1px;
  li {
    position: relative;
    flex: 1;
    list-style: none;
    padding: 10px;
    box-sizing: border-box;

    div {
      text-align: center;
      font-size: 26px;
    }

    div:first-child {
      margin-bottom: 15px;
      font-size: 22px;
    }
  }

  .num {
    font-weight: bold;
    color: #4c72fa;
  }
}

.todayStatic li::after {
  content: "";
  width: 1px;
  height: 40px;
  position: absolute;
  top: 18px;
  right: 0;
  background: #dedede;
}

.todayAccount {
  flex: 1;
  //   margin: 0 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
}

.allAccount {
  flex: 1;
}
.todayEchart {
  height: 90%;
  box-sizing: border-box;
}
.daynum {
  line-height: 40px;
  input {
    line-height: 28px;
    border: 1px solid rgb(231, 229, 229);
    border-radius: 4px;
  }
  input::-webkit-input-placeholder {
    color: rgb(199, 199, 199);
    text-indent: 8px;
  }
  //   color: rgb(0,202,149);
}
</style>